<template>
  <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog" style="min-width: 700px;">
    <addTypeTeacherAdd @onSubmit="onSubmit" ref="addTypeTeacherAdd" />
    <el-container>
      <el-main>
        <div class="app-search">
          <el-form :inline="true" class="demo-form-inline" v-model="form">
            <!--  <el-form-item label="人员姓名">
                <el-input
                  placeholder="请输入人员姓名"
                  v-model="form.name"
                ></el-input>
              </el-form-item>
              <el-form-item label="人员工号">
                <el-input
                  placeholder="请输入人员工号"
                  v-model="form.teacherNumber"
                ></el-input>
              </el-form-item> -->
            <el-form-item>
              <!-- <el-button type="primary" plain @click="onSubmit">搜索</el-button> -->
              <el-button type="success" plain @click="addBatch(1)" v-if="userType == 1">批量添加管理员</el-button>
              <el-button type="success" plain @click="addBatch(2)" v-if="userType == 2">批量添加维修人</el-button>
              <!-- <el-button type="warning" plain @click="clearAll">一键清空</el-button> -->
            </el-form-item>
          </el-form>
        </div>
        <el-table :data="list" style="width: 100%" size="small" :row-class-name="tableRowClassName">
          <el-table-column type="index" label="序号" width="60" />
          <el-table-column prop="userName" label="人员姓名" />
          <el-table-column prop="userNumber" label="人员工号" />
          <el-table-column prop="userNumber" label="角色">
            <template #default="scope">
              <span v-if="scope.row.userType == 1">管理员</span><span v-else>维修人员</span>
            </template>
          </el-table-column>
          <!-- 
          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="small" type="danger" @click="deleteApp(scope.row)">删除</el-button>
            </template>
          </el-table-column> -->

          <template v-slot:empty>
            <el-empty description="暂无数据"></el-empty>
          </template>
        </el-table>
        <el-config-provider :locale="locale">
          <el-pagination :total="total" :page-size="pageSize" :current-page="page"
            :page-sizes="[5, 10, 20, 30, 40, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
            @size-change="changePageSize" @current-change="changeCurrentPage">
          </el-pagination>
        </el-config-provider>

      </el-main>
    </el-container>
  </el-dialog>
</template>
<script>
import { ref } from "vue";
import baseTeacherDepartmentAdd from "@/components/baseInfo/baseTeacherDepartmentAdd.vue";
import { ElConfigProvider, ElMessageBox, ElMessage } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { httpService } from "@/utils/httpService";
import { Picture as IconPicture } from "@element-plus/icons-vue";
import addTypeTeacherAdd from "../../components/newRepair/addTypeTeacherAdd.vue"

export default {
  name: "BaseTeacherList",
  data() {
    return {
      type: 0,
      dialogFormVisible: ref(false),
      title: "",
      page: 1,
      typeId: "",
      pageSize: 10,
      total: 0,
      limit: 10,
      list: [],
      form: {
        name: "",
        teacherNumber: "",
      },
      userType: "",
    };
  },
  components: {
    baseTeacherDepartmentAdd, addTypeTeacherAdd,
    IconPicture,
    ElConfigProvider,
    ElMessageBox,
    ElMessage,
  },
  setup() {
    return {
      locale: zhCn,
    };
  },
  mounted() {

  },
  watch: {},
  methods: {

    closeDialog() {
      this.page = 1
      this.list = []
      this.title = ""
    },


    add() {
      this.$refs.baseTeacherDepartmentAdd.title = this.title;
      this.$refs.baseTeacherDepartmentAdd.addPath = '/javaApi/baseTeacherDepartment/add'

      this.$refs.baseTeacherDepartmentAdd.dialogFormVisible = true;
    },

    deleteApp(obj) {
      ElMessageBox.confirm("确定要删除本条记录吗？", "提醒", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          httpService(
            "/javaApi/repairInfo/v2/deleteById", "id=" + obj.id, "post").then((data) => {
              if (data.code == 200) {
                ElMessage.success("删除成功");
                this.queryAllManager();
              } else {
                ElMessage.error("删除失败");
              }
            });
        })
        .catch(() => { });
    },


    onSubmit() {
      this.queryAllManager();
    },
    // 每页记录数改变，size：回调参数，表示当前选中的“每页条数”
    changePageSize(size) {
      this.pageSize = size;
      this.queryAllManager();
    },
    // 改变页码，page：回调参数，表示当前选中的“页码”
    changeCurrentPage(page) {
      this.page = page;
      this.queryAllManager();
    },
    tableRowClassName({ row, rowIndex }) {
      return "";
    },

    queryAllManager(index) {
      httpService("/javaApi/repairTypeUser/list/" + this.page + "/" + this.pageSize,
        { userType: this.userType, repairTypeId: this.typeId }, "get").then((data) => {
          if (data) {
            this.list = data.list
            this.total = data.total
          }
        });

    },

    addBatch(index) {
      this.$refs.addTypeTeacherAdd.dialogFormVisible = true
      this.$refs.addTypeTeacherAdd.repairTypeId = this.typeId
      this.$refs.addTypeTeacherAdd.userType = index
      this.$refs.addTypeTeacherAdd.listByDepartmentId()
    },

    onSubmit() {
      this.queryAllManager()
    }

  },
};
</script>
<style scoped>
.el-main {
  padding: 0px;
  text-align: left;
}

.teacher-content {
  width: 100%;
}

.app-table {
  background: #eff3f5;
  padding: 10px;
}

.app-separator {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 10px;
}

.app-body {
  background: white;
  padding: 20px 20px 10px 20px;
  margin-bottom: 10px;
  min-height: calc(100vh - 204px);
}

.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-lighter);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-lighter);
}

.el-pagination {
  text-align: center;
  margin-top: 10px;
}
</style>
